<template>
  <div>
    <!-- 收费分析 -->
    <!-- 查询条件 -->
    <el-form :inline="true" class="tableSearchBox" size="medium">
      <el-form-item label="按月查询：">
        <el-date-picker
          v-model="search.time"
          type="month"
          format="yyyy-MM"
          value-format="yyyy-MM"
          placeholder="选择日期"
          :editable="false"
          :clearable="false"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getData">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 第一行 -->
    <el-row :gutter="15" class="row1">
      <el-col :span="6">
        <el-card>
          <div class="card_title">总水费</div>
          <v-chart ref="chartTotal" :options="totalOption" />
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="card_title">水费</div>
          <v-chart ref="chartWater" :options="waterOption" />
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="card_title">污水费</div>
          <v-chart ref="chartEffluent" :options="effluentOption" />
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="card_title">水资源税</div>
          <v-chart ref="chartTax" :options="taxOption" />
        </el-card>
      </el-col>
    </el-row>
    <!-- 第二行 -->
    <el-row :gutter="15" class="row2">
      <el-col :span="8">
        <el-card>
          <div class="card_title">水费分析</div>
          <v-chart ref="chartCost" :options="costOption" />
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div class="card_title">缴费方式分析</div>
          <v-chart ref="chartPaymentMethod" :options="paymentMethodOption" />
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div class="card_title">欠费账单分析</div>
          <v-chart ref="chartArrears" :options="arrearsOption" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      search: {
        time: new Date().format("yyyy-MM")
      },
      totalOption: {
        color: ["#3aa1ff", "#de656a", "#4ecb73", "#ffa000", "#fbd437"],
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c}元 ({d}%)"
        },
        legend: {
          orient: "vertical",
          right: 0,
          bottom: 0,
          data: ["水费", "污水费", "水资源税", "滞纳金"]
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["45%", "60%"],
            center: ["40%", "50%"],
            data: [
              {
                value: 735,
                name: "水费"
              },
              {
                value: 310,
                name: "污水费"
              },
              {
                value: 234,
                name: "水资源税"
              },
              {
                value: 135,
                name: "滞纳金"
              }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      },
      waterOption: {
        series: [
          {
            type: "pie",
            radius: [40, 35],
            x: "0%", // for funnel
            itemStyle: {
              normal: {
                label: {
                  formatter: function(params) {
                    return params.value.toFixed(2) + "%";
                  }
                }
              }
            },
            data: [
              {
                name: "other",
                value: 48,
                label: {
                  show: false,
                  position: "center"
                },
                labelLine: {
                  show: false
                },
                itemStyle: {
                  normal: {
                    color: "#ccc"
                  },
                  emphasis: {
                    color: "#ccc"
                  }
                }
              },
              {
                name: "",
                value: 52,
                label: {
                  show: true,
                  position: "center"
                },
                labelLine: {
                  show: false
                }
              }
            ]
          }
        ],
        animation: false
      },
      effluentOption: {
        series: [
          {
            type: "pie",
            radius: [40, 35],
            x: "0%", // for funnel
            itemStyle: {
              normal: {
                label: {
                  formatter: function(params) {
                    return params.value.toFixed(2) + "%";
                  }
                }
              }
            },
            data: [
              {
                name: "other",
                value: 78,
                label: {
                  show: false,
                  position: "center"
                },
                labelLine: {
                  show: false
                },
                itemStyle: {
                  normal: {
                    color: "#ccc"
                  },
                  emphasis: {
                    color: "#ccc"
                  }
                }
              },
              {
                name: "",
                value: 22,
                label: {
                  show: true,
                  position: "center"
                },
                labelLine: {
                  show: false
                }
              }
            ]
          }
        ],
        animation: false
      },
      taxOption: {
        series: [
          {
            type: "pie",
            radius: [40, 35],
            x: "0%", // for funnel
            itemStyle: {
              normal: {
                label: {
                  formatter: function(params) {
                    return params.value.toFixed(2) + "%";
                  }
                }
              }
            },
            data: [
              {
                name: "other",
                value: 84,
                label: {
                  show: false,
                  position: "center"
                },
                labelLine: {
                  show: false
                },
                itemStyle: {
                  normal: {
                    color: "#ccc"
                  },
                  emphasis: {
                    color: "#ccc"
                  }
                }
              },
              {
                name: "",
                value: 16,
                label: {
                  show: true,
                  position: "center"
                },
                labelLine: {
                  show: false
                }
              }
            ]
          }
        ],
        animation: false
      },
      costOption: {
        color: ["#3aa1ff", "#de656a", "#4ecb73", "#ffa000", "#fbd437"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function(params) {
            var tar;
            if (params[1].value !== "-") {
              tar = params[1];
            } else {
              tar = params[2];
            }
            return tar.name + " : " + tar.value;
          }
        },
        grid: {
          left: "3%",
          right: 15,
          top: 20,
          bottom: 10,
          containLabel: true
        },
        yAxis: {
          type: "category",
          data: ["应缴金额", "上次结余", "本次结余", "实际缴费"]
        },
        xAxis: {
          type: "value"
        },
        series: [
          {
            name: "",
            type: "bar",
            stack: "总量",
            itemStyle: {
              barBorderColor: "rgba(0,0,0,0)",
              color: "rgba(0,0,0,0)"
            },
            emphasis: {
              itemStyle: {
                barBorderColor: "rgba(0,0,0,0)",
                color: "rgba(0,0,0,0)"
              }
            },
            barWidth: "50%",
            data: [0, 800, 800, 0]
          },
          {
            name: "",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "right"
            },
            data: ["-", 120, "-", 900]
          },
          {
            name: "",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "right"
            },
            data: [920, "-", 100, "-"]
          }
        ]
      },
      paymentMethodOption: {
        color: ["#3aa1ff", "#de656a", "#4ecb73", "#ffa000", "#fbd437"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          bottom: 0,
          data: ["水费", "污水费", "水资源税", "滞纳金"]
        },
        grid: {
          left: "3%",
          right: "5%",
          top: 20,
          bottom: 40,
          containLabel: true
        },
        yAxis: {
          type: "category",
          data: ["现金", "预存抵扣", "微信"]
        },
        xAxis: {
          type: "value"
        },
        series: [
          {
            name: "水费",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "inside",
              formatter: function(params) {
                return params.data == 0 ? "" : params.data;
              }
            },
            barWidth: "50%",
            data: [320, 302, 301]
          },
          {
            name: "污水费",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "inside",
              formatter: function(params) {
                return params.data == 0 ? "" : params.data;
              }
            },
            data: [120, 132, 101]
          },
          {
            name: "水资源税",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "inside",
              formatter: function(params) {
                return params.data == 0 ? "" : params.data;
              }
            },
            data: [15, 0, 20]
          },
          {
            name: "滞纳金",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "inside",
              formatter: function(params) {
                return params.data == 0 ? "" : params.data;
              }
            },
            data: [22, 18, 0]
          }
        ]
      },
      arrearsOption: {
        color: ["#ffa000", "#3aa1ff"],
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["欠费金额", "欠费账单"]
        },
        grid: {
          left: "3%",
          right: "5%",
          top: 40,
          bottom: 10,
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: [
              "之前",
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月"
            ],
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "金额"
          },
          {
            type: "value",
            name: "数量"
          }
        ],
        series: [
          {
            name: "欠费金额",
            type: "bar",
            data: [122.0, 324.9, 37.0, 23.2, 225.6, 176.7, 135.6]
          },
          {
            name: "欠费账单",
            type: "line",
            yAxisIndex: 1,
            data: [9, 23, 4, 7, 13, 34, 21]
          }
        ]
      }
    };
  },
  mounted() {
    this.echartsResize(this.$refs);
    this.$store.state.refs = this.$refs;
  },
  beforeDestroy() {
    this.$store.state.refs = null;
  },
  created() {},
  methods: {
    getData() {
      console.log(this.search.time);
    }
  }
};
</script>
<style lang="scss" scoped>
.row1,
.row2 {
  min-width: 1200px;
}
.row2 {
  margin-top: 15px;
}
.row1 .echarts {
  width: 100%;
  height: 150px;
}
.row2 .echarts {
  width: 100%;
  height: 300px;
}
</style>